<template>
    <div class="tags" v-if="showTags">
        <div class="tags_wrap" :class="{'over': over}">
            <div class="tags_content">
                <ul class="tags_list" :style="{'width': tagsInit + 'px'}">
                    <li class="tags_li" v-for="item in tagsList" :class="{'active': isActive(item.path)}" :key="item.path">
                        <div class="tags_li_item">
                            <span class="tags_li_title" @click="jumpPage(item.path)">{{item.title}}<i class="el-icon-close" @click="closeTags(item)"></i></span>
                        </div>                    
                    </li>
                </ul>
            </div>            
            <div class="arrow" v-if="over">
                <el-button size="mini" icon="el-icon-arrow-left" :disabled="tagsLeft == 0" @click="changeDirection(0)"></el-button>
                <el-button size="mini" icon="el-icon-arrow-right" :disabled="maxTags" @click="changeDirection(1)"></el-button>
            </div>
        </div>        
    </div>
</template>

<script>
import bus from './bus';
export default {
    data() {
        return {
            curIndex: 0,
            tagsInit: 0,
            tagsLeft: 0,  
            offsetInit: 0,  
            maxTags: false,       
            tagsList: [],
            over: false,
        }
    }, 
    watch:{
        '$route': {
            immediate: true,
            handler: function(to,from){
                const isExist = this.tagsList.find((item)=>to.fullPath == item.path);         
                if (!isExist) { 
                    if (to.fullPath.indexOf('create_team') > -1) return;       
                    if (to.fullPath.indexOf('view_team') > -1) return;
                    if (to.fullPath.indexOf('reply_msg') > -1 && this.tagsList.filter(v => v.path.indexOf('reply_msg') > -1).length > 0) return;                    
                    this.tagsList.push({
                        title: to.meta.title,
                        path: to.fullPath,
                    });                                                         
                } else {
                    this.tagsWidthInit()
                }
            }
        },
        'tagsList': {
            immediate:true,
            handler(newVal,oldVal){
                this.$nextTick(() => this.tagsWidthInit()); 
            }
        }
    },   
    computed: {
        showTags() {
            return this.tagsList.length > 0;
        }
    },
    mounted(){
        this.$nextTick(() => this.tagsWidthInit()); 
        window.onresize = () => this.tagsWidthInit();        
    },
    methods: {
        tagsWidthInit(){   // 计算标签大容器尺寸
            let [ tagsWrap,tagsList,tagsLi,scrollbar ] = [ 
                document.getElementsByClassName('tags_content')[0],
                document.getElementsByClassName('tags_list')[0],
                document.getElementsByClassName('tags_li')
            ];
            this.tagsInit = 0; 
            this.tagsLeft = 0;
            this.over = false;
            this.curIndex = this.tagsList.findIndex(v => v.path == this.$route.path);       
            for (let i = 0,len = tagsLi.length;i < len;i++) { 
                this.tagsInit += tagsLi[i].offsetWidth;
                this.tagsList[i]['width'] = tagsLi[i].offsetWidth;
                this.tagsList[i]['offset'] = this.tagsInit - tagsLi[i].offsetWidth; 
            }                      
            if (this.tagsInit > tagsWrap.offsetWidth) {                                
                this.tagsLeft = this.tagsList[this.curIndex].offset > tagsWrap.offsetWidth ? Math.abs(this.tagsList[this.curIndex].offset + this.tagsList[this.curIndex].width - tagsWrap.offsetWidth) : 0;
                tagsList.style.left = this.tagsLeft > 0 ? (-this.tagsLeft + 'px') : this.tagsLeft + 'px';
                this.over = true;
            } else {
                this.tagsLeft = 0;
                tagsList.style.left = this.tagsLeft + 'px';
            }
        },
        jumpPage(path){ // 路由跳转    
            this.maxTags = false;    
            this.$router.push(path);
            this.tagsWidthInit();
        },
        isActive(path) {    // 匹配当前路由
            return path === this.$route.fullPath;
        },           
        closeTags(item){   // 关闭单个标签
            let tagsLi = Array.from(document.getElementsByClassName('tags_li'));
            let index = this.tagsList.findIndex(v => v.path == item.path);
            this.curIndex = this.tagsList.findIndex(v => v.path == this.$route.path);
            if (index == 0 && tagsLi.length == 1) this.$router.push('/');
            if (index !== this.curIndex) {
                this.tagsList.splice(index,1);
                this.$router.push(tagsLi[this.curIndex].path);
            } 
            if (index == this.curIndex) {  
                if (this.curIndex > 0) {
                    tagsLi[index - 1].className == 'tags_li active';
                    this.curIndex = index - 1;
                    this.tagsList.splice(index,1);
                    this.$router.push(this.tagsList[this.curIndex].path);
                } else {
                    if (this.tagsList.length > 1) {
                        tagsLi[index + 1].className == 'tags_li active';
                        this.curIndex = index + 1;
                        this.$router.push(this.tagsList[this.curIndex].path);
                        this.tagsList.splice(index,1);
                    }
                }             
            }
        },
        changeDirection(dir){   // 左右箭头
            let [ tagsWrap,tagsList ] = [ 
                document.getElementsByClassName('tags_content')[0],
                document.getElementsByClassName('tags_list')[0], 
            ];
            let i = this.tagsList.length - 1;   
            this.maxTags = false;        
            if (dir == 1) {
                if (this.tagsLeft >= this.tagsList[i].offset + this.tagsList[i].width - tagsWrap.offsetWidth) {
                    this.tagsLeft = this.tagsList[i].offset + this.tagsList[i].width - tagsWrap.offsetWidth;
                    this.maxTags = true;
                } else {
                    this.tagsLeft += 50;                    
                }
                tagsList.style.left = -this.tagsLeft + 'px';
            }             
            if (dir == 0) {
                if (this.tagsLeft > 0) {
                    this.tagsLeft -= 50;
                } else {
                    this.tagsLeft = 0;
                }
                tagsList.style.left = -this.tagsLeft + 'px';
            }
        }
    },    
}
</script>


<style lang="scss" scoped>
.tags {
    height: 30px;
    background-color: #fff;
    box-shadow: 0 3px 5px #ddd;
    position: relative;
    .tags_wrap{
        width: 100%;
        height: 30px;         
        overflow: hidden;       
        position: relative;
        .tags_content{
            width: 100%;
            height: 30px;
            position: relative;
            overflow: hidden;
            .tags_list{
                height: 30px; 
                z-index: 1;      
                position: absolute;
                left: 0;
                top: 0;
                .tags_li {
                    float: left;          
                    font-size: 12px;
                    padding: 2px 0 2px 5px;   
                    .tags_li_item{
                        height: 24px;
                        line-height: 24px;
                        border-radius: 3px;
                        background-color: #fff;
                        border: 1px solid #e9eaec;
                        vertical-align: middle;
                        color: #666;
                        padding: 0 5px;                 
                        -webkit-transition: all .3s ease-in;
                        -moz-transition: all .3s ease-in;
                        transition: all .3s ease-in;
                        overflow: hidden;
                        cursor: pointer;
                        &:hover{
                            background-color: #eee;
                        }
                        .tags_li_title {
                            float: left;
                            white-space: nowrap;    
                            i{
                                margin: 0 0 0 3px;
                            }                  
                        }
                    }                
                }
                .tags_li.active .tags_li_item{
                    border-color:#409EFF;
                    background-color: #409EFF;
                    overflow: hidden;
                    color: #fff;         
                } 
            }
        }        
        .arrow{
            width: 100%;
            height: 100%;     
            position: absolute;
            left: 0;
            bottom: 0;
            button{
                width: 30px;
                height: 30px;
                padding: 0;
                border-radius: 0;
                border: none;
                background-color: #fff;
                font-size: 20px;
                line-height: 30px;
                text-align: center;
                position: relative;
                z-index: 5;
                &:first-child{
                    float: left;
                    box-shadow: 5px 0 8px rgba(0,0,0,.3);
                }
                &:last-child{
                    float: right;
                    box-shadow: -5px 0 8px rgba(0,0,0,.3);
                }
                &:active{

                }
            }
        }
    }
    .tags_wrap.over{
        padding: 0 30px;  
        box-sizing: border-box;
    }
}   
</style>
